<template>
  <!-- 平台成本 -->
  <div id="add">
    <div class="padding_10 box">
      <el-form ref="form" :model="form" label-width="100px" size="medium">
        <el-row style="padding: 20px 0px" :gutter="10">
          <el-col :span="5">
            <el-form-item label="方案状态：" prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="选择通道：" prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" label-width="40px" prop="username">
              <div class="display_flex">
                <el-select style="width: 90px" v-model="form.time">
                  <el-option value="1" label="1"></el-option>
                </el-select>
                <div class="flex_1">
                  <el-date-picker
                    v-model="form.time"
                    class="width_100"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="width_100 display_flex">
              <!-- <div class="flex_1"></div> -->
              <el-button class="butBox but1">查询</el-button>
              <el-button class="butBox">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button @click="dialogVisible = true" class="add_cb"
          >添加成本方案</el-button
        >
      </div>
      <el-table
        :header-cell-style="{ background: '#E6EFFF' }"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="index" width="100" label="序号">
        </el-table-column>
        <el-table-column prop="name" label="通道名称" width="100">
        </el-table-column>
        <el-table-column prop="rate" label="支付宝费率(%)" width="110">
        </el-table-column>
        <el-table-column prop="rate" label="微信费率(%)" width="100">
        </el-table-column>
        <el-table-column
          prop="rate"
          label="银联借记卡(≤1000 元）费率(%)"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="rate"
          label="银联借记卡(>1000 元）费率(%)"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="rate" label="银联借记卡封顶额(元)" width="150">
        </el-table-column>
        <el-table-column
          prop="rate"
          label="银联贷记卡(≤1000 元）费率(%)"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="rate"
          label="银联贷记卡(>1000 元）费率(%)"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="type" label="方案状态" width="200">
        </el-table-column>
        <el-table-column prop="time" label="启用时间" width="200">
        </el-table-column>
        <el-table-column prop="time" label="停用时间)" width="200">
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加成本方案 -->
    <el-dialog
      title="添加平台成本方案"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <div>
        <el-form
          ref="form"
          :model="form"
          label-width="115px"
          size="medium"
          :rules="rules"
        >
          <el-form-item label="选择渠道：" prop="select">
            <el-select v-model="form.select" placeholder="请选择">
              <el-option label="直连" value="1"> </el-option>
              <el-option label="乐刷" value="2"> </el-option>
              <el-option label="瑞银信" value="3"> </el-option>
              <el-option label="联动优势" value="4"> </el-option>
              <el-option label="浦发银行支付" value="5"> </el-option>
              <el-option label="邮储" value="6"> </el-option>
              <el-option label="邮储线上支付" value="7"> </el-option>
              <el-option label="邮储手机银行" value="8"> </el-option>
              <el-option label="利群" value="9"> </el-option>
              <el-option label="运通支付" value="10"> </el-option>
              <el-option label="工商银行支付" value="11"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
          :header-cell-style="{ background: '#F7F8FC' }"
          class-name="centered-table"
          :data="addTable"
          style="width: 100%"
        >
          <el-table-column prop="rate" label="支付宝费率(%)" width="180">
            <template slot-scope="scope">
              <div style="display: flex">
                <el-input
                  @change="listRate(0, 'zfb_rate')"
                  size="small"
                  v-model="list.zfb_rate[0]"
                  placeholder="请输入"
                ></el-input>
                <el-input
                  @change="listRate(1, 'zfb_rate')"
                  size="small"
                  v-model="list.zfb_rate[1]"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="rate" label="微信费率(%)" width="180">
            <template slot-scope="scope">
              <div style="display: flex">
                <el-input
                  @change="listRate(0, 'wx_rate')"
                  size="small"
                  v-model="list.wx_rate[0]"
                  placeholder="请输入"
                ></el-input>
                <el-input
                  @change="listRate(1, 'wx_rate')"
                  size="small"
                  v-model="list.wx_rate[1]"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            width="180"
            label="银联借记卡(≤1000 元)费率(%)"
          >
            <template slot-scope="scope">
              <div style="display: flex">
                <el-input
                  @change="listRate(0, 'yl_da_rate')"
                  size="small"
                  v-model="list.yl_da_rate[0]"
                  placeholder="请输入"
                ></el-input>
                <el-input
                  @change="listRate(1, 'yl_da_rate')"
                  size="small"
                  v-model="list.yl_da_rate[1]"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="银联借记卡（>1000 元）费率(%)"
            width="180"
          >
            <template slot-scope="scope">
              <div style="display: flex">
                <el-input
                  @change="listRate(0, 'yl_xiao_rate')"
                  size="small"
                  v-model="list.yl_xiao_rate[0]"
                  placeholder="请输入"
                ></el-input>
                <el-input
                  @change="listRate(1, 'yl_xiao_rate')"
                  size="small"
                  v-model="list.yl_xiao_rate[1]"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="银联借记卡封顶额（元）"
            width="180"
          >
            <template slot-scope="scope">
              <div style="display: flex">
                <el-input
                  @change="listRate(0, 'yl_max_rate')"
                  size="small"
                  v-model="list.yl_max_rate[0]"
                  placeholder="请输入"
                ></el-input>
                <el-input
                  @change="listRate(1, 'yl_max_rate')"
                  size="small"
                  v-model="list.yl_max_rate[1]"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            prop="address"
            label="银联贷记卡(≤1000 元)费率(%)"
          >
            <template slot-scope="scope">
              <div style="display: flex">
                <el-input
                  @change="listRate(0, 'yl_d_min_rate')"
                  size="small"
                  v-model="list.yl_d_min_rate[0]"
                  placeholder="请输入"
                ></el-input>
                <el-input
                  @change="listRate(1, 'yl_d_min_rate')"
                  size="small"
                  v-model="list.yl_d_min_rate[1]"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="银联贷记卡(>1000 元)费率(%)"
            width="180"
          >
            <template slot-scope="scope">
              <div style="display: flex">
                <el-input
                  @change="listRate(0, 'yl_d_max_rate')"
                  size="small"
                  v-model="list.yl_d_max_rate[0]"
                  placeholder="请输入"
                ></el-input>
                <el-input
                  @change="listRate(1, 'yl_d_max_rate')"
                  size="small"
                  v-model="list.yl_d_max_rate[1]"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblef">取 消</el-button>
        <el-button type="primary" @click="addRate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { testFun, tipsFun } from "../../../util/request.js"
export default {
  data () {
    return {
      // 渠道选择
      form: {
        select: ""
      },
      rules: {
        select: [{ required: true, message: "请选择渠道", trigger: "blur" }]
      },
      list: {
        zfb_rate: [0, 0.6],
        wx_rate: [0, 0.6],
        yl_da_rate: [0, 0.6],
        yl_xiao_rate: [0, 0.6],
        yl_max_rate: [0, 0.6],
        yl_d_min_rate: [0, 0.6],
        yl_d_max_rate: [0, 0.6]
      },
      dialogVisible: false,
      search: {},
      timeValue: "",
      timeState: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          time: "2023-10-28-9-00-00",
          type: "启动",
          rate: "0.22-0.6"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          time: "2023-10-28-9-00-00",
          type: "启动",
          rate: "0.22-0.6"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          time: "2023-10-28-9-00-00",
          type: "启动",
          rate: "0.22-0.6"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          time: "2023-10-28-9-00-00",
          type: "启动",
          rate: "0.22-0.6"
        }
      ],
      addTable: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ]
    }
  },
  watch: {
    timeState () {
      console.log("数据发生变化")
      this.timeValue = ""
    }
  },
  methods: {
    // 清空添加框里的内容
    dialogVisiblef () {
      this.dialogVisible = false
      this.form.select = ""
      this.list = {
        zfb_rate: [],
        wx_rate: [],
        yl_da_rate: [],
        yl_xiao_rate: [],
        yl_max_rate: [],
        yl_d_min_rate: [],
        yl_d_max_rate: []
      }
    },
    listRate (i, type) {
      for (let key in this.list) {
        if (key == type) {
          if (this.list[key][0] > this.list[key][1]) {
            tipsFun(this, "error", "费率/封顶额下限应小于上限值")
          }
          var num = String(this.list[key][i]).length
          if (this.list[key][i] > 0 && this.list[key][i] <= 0.6 && num < 5) {
          } else {
            console.log("不符合")
            this.$set(this.list[key], i, "")
            tipsFun(
              this,
              "error",
              "费率/封顶额下限>0,上限≤0.6,并且小数点后不能超过两位"
            )
          }
        }
      }
    },
    addRate () {
      var that = this
      this.$refs.form.validate(valid => {
        if (valid) {
          const arr = Object.values(this.list)
          const allNotEmpty = arr.every(item => item.length !== 0)
          if (allNotEmpty) {
            console.log("添加成功", this.list)
            this.dialogVisiblef()
          } else {
            tipsFun(that, "error", "费率不得为空")
          }
        }
      })
    },
    see () {
      console.log("查询参数", this.search)
    },
    clearFn () {
      this.search = {}
    },
    time () {
      if (this.timeState == 1) {
        delete this.search.add_time
        this.search.over_time = this.timeValue
      } else if (this.timeState == 2) {
        delete this.search.over_time
        this.search.add_time = this.timeValue
      }
    }
  }
}
</script>
<style scoped>
.box {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
}
.butBox {
  padding: 10px 40px;
  margin-left: 20px;
}
.but1 {
  background-color: #3f75ff;
  color: #fff;
}
/deep/ .el-table__cell {
  text-align: center;
}
.centered-table th,
.centered-table td {
  text-align: center;
}

.add_cb {
  width: 110px;
  height: 32px;
  background: #3f75ff;
  color: #fff;
  border-radius: 4px 4px 4px 4px;
}
.button {
  width: 106px;
  height: 31px;
  background: #3f75ff;
  border-radius: 4px 4px 4px 4px;
  color: #fff;
}
.time_box {
  display: flex;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
